﻿<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>注册界面</title>

<style>
.whole{
	text-align:center;
    height:600px;
	width:340px;
    background-color:#E0FFFF;
	position:absolute;
    left: 38%;
}
.text_register {
    margin-top: 100px;
}
.text{
	width:200px;
    height:30px;
    margin-right: 30px;
    margin-bottom: 10px;
    float: right;
}
.menu {
    width: 80px;
    float: left;
    font-weight: bold;
    padding: 12px;
}	
		  
input[type="submit"]{
	width:100px;
    height:50px;
}
.submit{
	position:absolute;
    right:60px;
	top:400px;
}
.button {
    margin-left: 10px;
}		
</style>

</head>

<body>
<div class="whole">
	<h1 class="text_register">注册</h1>
    <div>
        <div>
            <div class="menu">用户名:</div>
            <input id="input" type="text" class="text" placeholder="请输入用户名">
        </div>
        <div>
            <div class="menu">邮箱:</div>
            <input id="email" type="text" class="text" placeholder="请输入邮箱">   
        </div>
	    <div>
            <div class="menu">密码:</div>
            <input id="wordq" type="password" class="text" placeholder="请输入密码">
        </div>
        <div>
            <div class="menu">确认密码:</div>
            <input id="wordw" type="password" class="text" placeholder="请确认密码">
        </div>
	</div>

	<div class=submit>
	    <input id="register" class="button" type="submit" value="注册" onclick="supportLs()">
		<input id="login" class="button" type="submit" value="返回登陆" onclick="back()">
	</div>
</div>

</body>

<script type="text/javascript">
	// document.getElementById('register').addEventListener("click", function (event) {
	// 	// body...
	// 	alert("请输入用户名");
	// });
	function supportLs() {// 检查是否支持Ls

        if (!window.localStorage) {
            alert("浏览器不支持localstorage");
            return;
        } else {
            
            // 主逻辑业务
            // 找到用户名的输入框对象
            var inputUsername = document.getElementById('input');
            // 取出用户输入用户名的值
            var username = inputUsername.value;

            checkUsername(username); 
            checkEmail();
            checkPassword(username);
        }
            
    }

    // 检查用户名合法性 
    function checkUsername(username) {
        // 如果用户没有输入用户名
        if (username == "") {
            alert("请输入用户名");
            return;
        }

    }

    // 检查邮箱的合法性
    function checkEmail() {
        var emailId = document.getElementById('email');
        var email = emailId.value;
        var positionq = email.indexOf("@",0);
        var positionw = email.indexOf(".",0);
        var cha = positionw - positionq;
        if (email == "") {
            alert("请输入邮箱");
            return;
        }
        if (positionq > positionw) {
            alert(".不能在@前");
            return;
        }
        if (email.indexOf("@",0) == -1) {
            alert("必须包含@符号");
            return;
        }
        if (email.indexOf(".",0) == -1) {
            alert("必须包含.符号");
            return;
        }
    }

    // 检查密码合法性
    function checkPassword(username) {
        var inputwordq = document.getElementById('wordq');
        var passwordq = inputwordq.value;
        var inputwordw = document.getElementById('wordw');
        var passwordw = inputwordw.value;
        if (passwordq.length == 0) {
            alert("请输入密码");
            return;
        }
        if (passwordw.length == 0) {
            alert("请再次输入密码");
            return;
        }   
             
        if (passwordq != passwordw) {
            alert("两次密码不一致");
            return;
        }
        var storage = window.localStorage;
        var usernameStorage =  storage.username;
        if (username == usernameStorage) {
            alert("用户名已存在");
            return;
        }    
        storage["username"] = username;
        storage["password"] = passwordq;

        var emailId = document.getElementById('email');
        var email = emailId.value;
        storage["email"] = email;

        var date = new Date();
        var currentTime = date.toLocaleString();
        storage["registerTime"] = currentTime;

        alert("注册成功");
    }

    // 返回登陆页面
    function back() {
        window.open("./login.html");
    }
        
    
</script>

</html>










